<template>
  <div style="height:100%">
    <div style="height:100%">
      <div style="color:#fff;font-size:1.6rem;margin-bottom:0.2%">学历分布</div>
      <div style="width:100%;height:85%;margin:0 auto">
        <Echart :echartObj="echartObj" />
      </div>
    </div>
  </div>
</template>

<script>
import Echart from '@/components/echarts/pie2.vue'

export default {
  props: ['qualificationStatistics'],
  data() {
    return {
      echartObj: {}
    }
  },
  components: {
    Echart
  },
  watch: {
    qualificationStatistics: {
      handler(val, oldVal) {
        if (val.length > 0) {
          val.forEach((res) => {
            switch (res.name) {
              case '其他':
                res['color'] = '#417BFC'
                break
              case '初中及以下':
                res['color'] = '#16DDFE'
                break
              case '高中':
                res['color'] = '#1790CE'
                break
              case '大专':
                res['color'] = '#FE519B'
                break

              default:
                res['color'] = '#F77062'
                break
            }
          })
          this.echartObj = {
            color: ['#417BFC', '#16DDFE', '#1790CE', '#FE519B', '#F77062'],
            tooltip: {
              trigger: 'item',
              formatter: '{b} : {c} ({d}%)'
            },
            grid: {
              left: 0,
              top: 5,

              right: 0
              // containLabel: true
            },
            series: [
              {
                name: '学历分布',
                type: 'pie',
                radius: '70%',
                // hoverAnimation: false,
                // avoidLabelOverlap: false,
                center: ['50%', '60%'],
                label: {
                  formatter: '{b}\n({d}%)',
                  color: '#fff',
                  align: 'right',
                  lineHeight: 15,
                  fontSize: 12
                },
                labelLine: {
                  length2: 5
                },
                data: val,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
        }
      },
      // 配置立即执行属性
      immediate: true
    }
  }
}
</script>

<style scoped>
</style>